<template>
  <div class="nav-wrapper">
    <div class="nav-container" :class="{fold : !expand}">
      <div class="logo"></div>
      <div class="line"></div>
      <div class="menu">
        <div class="menu-container">
          <div
            class="menu-item"
            v-for="(item, key) in list"
            :key="key"
            :class="{ select: '/' + $route.name === item.url }"
          >
            <router-link v-if="item.isRouterLink" :to="item.url">
              <i class="nav-icon el-icon-menu"></i>
              <span class="nav-text" v-if="expand">{{ item.text }}</span>
            </router-link>
            <a v-else :href="item.url">
              <i class="nav-icon el-icon-s-home"></i>
              <span class="nav-text" v-if="expand">{{ item.text }}</span>
            </a>
          </div>
        </div>
      </div>
      <div class="login">
        <div class="avatar" v-if="expand">
          <span class="el-icon-user-solid"></span>
        </div>
        <div class="username" v-if="expand">{{userName}}</div>
        <div class="expand" @click="expandHander">
          <span :class="expand?'el-icon-s-fold':'el-icon-s-unfold'"></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MenuNav",
  data() {
    return {
      expand:true,
      list: [
        {
          url: "https://mc-wuchuan.gagogroup.cn/screen/screen-1",
          text: "返回首页",
          isRouterLink: false,
        },
        {
          url: "/ecoCoord",
          text: "坐标生态体检",
          isRouterLink: true,
        },
        {
          url: "/ecoSlicing",
          text: "生态功能区划片",
          isRouterLink: true,
        },
        {
          url: "/ecoSuitable",
          text: "生态适宜指导",
          isRouterLink: true,
        },
        {
          url: "/affoTask",
          text: "造林作业指导",
          isRouterLink: true,
        },
        {
          url: "/ecoHomo",
          text: "生态同质化区域分析",
          isRouterLink: true,
        },
        {
          url: "/shrubWood",
          text: "宜灌木林地统计",
          isRouterLink: true,
        },
        {
          url: "/arborWood",
          text: "宜乔木林地统计",
          isRouterLink: true,
        },
      ],
    };
  },
  computed:{
    userName(){
      return this.$store.getters.name
    }
  },
  methods: {
    // 展开收起
    expandHander(){
      this.expand = !this.expand;
    }
  }
};
</script>
<style scoped lang="scss">
.nav-wrapper {
  padding-top: 112px;
  width: auto;
  height: 100%;
  padding-top: 96px;
  background-color: rgba(1, 25, 28, 0.9);
  border-right: 1px solid rgba(64, 239, 255, 0.15);

  .nav-container {
    height: 100%;
    width: 280px;
    background: rgb(0, 44, 59);
    display: flex;
    flex-direction: column;
    color: rgba(255, 255, 255, 0.65);

    &.fold {
      width: 64px;

      .logo {
        height: 58px;
      }
    }

    * {
      transition-property: color, transform, background-color;
      transition-duration: 0.3s;
    }

    .logo {
      width: 100%;
      height: 134px;
      padding: 16px;
      -webkit-box-flex: 0;
      flex-grow: 0;
      flex-shrink: 0;
    }

    .line {
      height: 1px;
      width: 100%;
      background-color: rgba(255, 255, 255, 0.04);
      -webkit-box-flex: 0;
      flex-grow: 0;
      flex-shrink: 0;
    }

    .menu {
      font-size: 18px;
      height: 100%;
      overflow: hidden auto;

      .menu-item {
        position: relative;
        line-height: 42px;
        height: 42px;
        display: flex;
        padding-left: 24px;

        &.select {
          background-color: rgba(0, 20, 23, 0.25);
          a {
            color: rgb(255, 255, 255);
          }

          &::after {
            content: "";
            border-right: 3px solid rgb(130, 216, 252);
            position: absolute;
            top: 0px;
            box-sizing: border-box;
            width: 3px;
            height: 100%;
            right: 0px;
          }
        }

        a {
          width: 100%;
          height: 100%;
          color: rgba(255, 255, 255, 0.65);
          &:hover {
            color: rgb(255, 255, 255);
          }
        }
      }
    }

    .login {
      display: flex;
      flex-direction: row;
      height: 48px;
      line-height: 48px;
      -webkit-box-flex: 0;
      flex-grow: 0;
      flex-shrink: 0;
      padding-left: 8px;

      .avatar {
        width: 48px;
        -webkit-box-flex: 0;
        flex-grow: 0;
        text-align: center;
      }

      .username {
        -webkit-box-flex: 1;
        flex-grow: 1;
      }

      .expand {
        width: 48px;
        -webkit-box-flex: 0;
        flex-grow: 0;
        text-align: center;
        cursor: pointer;

        &:hover {
          color: #fff;
        }
      }
    }
    // &::-webkit-scrollbar {
    //   width: 8px;
    //   height: 8px;
    // }
    // /*定义滚动条轨道 内阴影+圆角*/
    // &::-webkit-scrollbar-track {
    //   border-radius: 0;
    //   background-color: rgba(35, 31, 125, 0.6);
    // }
    // /*定义滑块 内阴影+圆角*/
    // &::-webkit-scrollbar-thumb {
    //   border-radius: 4px;
    //   background-image: linear-gradient(90deg, #086b7a, rgb(17, 81, 30));
    // }
  }
}
</style>